<template>
    <div id="search">
        <!--导航条-->
        <div id="Tabbar">
            <span id="span">
                <span class="fa fa-angle-left" style="color:white"></span>
                <span @click="back" style="color:white">返回</span>
            </span>
            <span style="color:white">搜索</span>
        </div>

        <div id="search-List">
            <div id="search-H">
                <img src="static/X.svg" @click="reset" >
                <span>
                    <input type="text" placeholder="请输入你想要的产品" ref="reference">
                    <img src="static/搜索(1).svg" alt="" @click="searchClick">
                </span>
            </div>


                <div  v-for="i in content" >
                    <div v-for="j in i.content">
                        <div v-for=" k in j.List">
                            <router-link :to="'/GoodsDetails/'+k.title">
                                <div class="GoodsList">
                                    <div>
                                        <img :src="k.img">
                                    </div>
                                    <div>
                                        <p class="first-p">{{k.title}}</p>
                                        <p class="second-p">{{k.content}}</p>
                                        <span>￥{{k.price}}</span>
                                    </div>
                                </div>
                            </router-link>
                        </div>
                        
                    </div>
                    
                </div>
        </div>
        <Tabbar v-if="isshow"></Tabbar>
    </div>
</template>

<script>
import Tabbar from './Tabbar.vue'
export default {
    data:function(){
        return {
            content:[],
            isshow :false
        }
    },
    methods:{
        back:function(){
            this.$emit("search")
        },
        reset:function(){
            this.$refs.reference.value = "";
        },
        searchClick:function(){
            if(this.$refs.reference.value==""){
                this.layer.msg("请输入内容");
            }else{
                this.http.get("/api/search",{
                    params:{
                        content:this.$refs.reference.value
                    }
                })
                .then(res=>{
                    console.dir(res.data.s1);
                    if(!res.data.s1){
                        this.layer.msg("未查到数据")
                    }else{
                        this.isshow = true;
                        this.content = res.data.s1;
                    }   
                    
                })
            }
        }
    },
    components:{
        Tabbar,
    }
}
</script>

<style scoped>
    #search{
        width: 100vw;
        position: absolute;
        z-index: 20;
        top: 0;
    }
    #search-List{
        margin-top: 8vh;
        height:calc(100vh - 16vh);
        overflow-y: scroll;
        background-color: white;
    }
    #Tabbar{
        height: 8vh;
        width: 100vw;
        background-color: black;
        color: white;
        font-size: 4.5vw; 
        position: fixed; 
    }
    #Tabbar #span{
        line-height: 8vh;
        margin-left: 5vw;
        margin-right: 25vw;
    }
    img{
        width: 4vw;
        position: relative;
        top: 0vh;
        left: 2vw;
    }
    #search-H{
        padding-top: 1vh;
        padding-left: 4vw;
        height: 10vh;
        width: 100vw;
        background-color: white;
        border-bottom: solid 1px #dedede;
    }
    #search-H input{
        position: relative;
        top:-0.3vh;
        height: 100%;
        padding-left: 2vw;
        width: 85%;
        z-index: 1;
        border:none;
    }
    #search-H span{
        background-color: grey;
        width: 70vw;
        margin-left: 10vw;
        display: inline-block;
        line-height: 7vh;
        height: 7vh;
        z-index: 10px;
        border: 1px solid grey;
        border-radius: 5px;
    }
    .GoodsList{
        display: flex;
        height: 27vh;
        border-bottom: 1px solid #f0f0f0;
    }
    .GoodsList img{
        width: 30vw;
        position: relative;
        top: 4vh;
        
    }
    .GoodsList div:nth-of-type(1){
        width: 30%;
       
    }
    .GoodsList div:nth-of-type(2){
        padding-top: 1vh;
        padding-left: 5vw;
        
    }
    .first-p{
        font-size: 4vw;
        margin: 2vh 0 ;
        color: black;
        
    }
    .second-p{
        margin-bottom: 2vh;
        font-size: 3.5vw;
        color: grey;
    }
    span{
        font-size: 4.5vw;
        color: #ff4040;
    }
    a{
        text-decoration: none;
    }
</style>